<template>
  <div class="detail">
    <teleport to=".app-header">
      <van-nav-bar class="navBar detail-navBar" left-arrow @click-left="back">
        <template #right>
          <van-icon name="ellipsis" />
        </template>
      </van-nav-bar>
    </teleport>
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(img, index) in data.banners" :key="index">
          <img :src="img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="pro-info" v-if="Object.keys(data).length">
      <van-row justify="center">
        <van-col class="col" span="22">
          <b>{{ data.proname }}</b>
        </van-col>
        <van-col class="col" span="22">
          {{ data.desc }}
        </van-col>
        <van-col class="col" span="22">
          ¥ {{ data.originprice * data.discount }}
        </van-col>
      </van-row>
    </div>

    <teleport to=".app-footer">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-button
          type="danger"
          text="加入购物车"
          @click="addToShoppingCar"
        />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </teleport>

    <!-- 
    <router-link to="/detail?proid=pro_3f9450b6-587b-440a-a7ce-e12a505e4029">测试1</router-link>
    <router-link to="/detail?proid=pro_94fe7360-98ab-4a27-911d-be4d35bb66ba">测试2</router-link>
    <router-link to="/detail?proid=pro_97f4e04e-8024-4e7e-9562-f71371ba138d">测试3</router-link> -->
  </div>
</template>

<script setup>
import { ref, reactive, watchEffect, getCurrentInstance } from "vue";
import { getProDetailAPI } from "@/api/category.js";
import { addCartAPI } from "@/api/cart.js";
import { useRoute, useRouter } from "vue-router";
import { showConfirmDialog, showFailToast } from "vant";

let route = useRoute();
let router = useRouter();

let app = getCurrentInstance();
var { getLoginStatus, getLoginUserId, toLogin } = app.appContext.config.globalProperties;
console.log("app", getLoginStatus, getLoginUserId);

// 普通数据
// var query = route.query;
// console.log(query);

// 响应式数据
let query = reactive({
  // 定义响应数据
  proid: "",
});
let data = ref({});

watchEffect(async () => {
  query.proid = route.query.proid; // 监听$route的变化 => 更新 query对象
  console.log(1111, query.proid);
  try {
    var res = await getProDetailAPI({ proid: query.proid });
    // console.log("详情页数据请求成功", res);
    // 处理banners
    res.data.banners = res.data.banners[0].split(",");

    data.value = res.data;
    console.log("详情页数据请求成功", data);
  } catch (err) {
    showFailToast(err.message);
  }
});

let addToShoppingCar = async () => {
  let isLogin = getLoginStatus(); // 获取登录状态
  let userid = getLoginUserId(); // 获取用户id
  console.log(isLogin, userid);
  if (isLogin) {
    // 已经登录 => 调用接口加入购物车
    try {
      var res = await addCartAPI({
        userid: userid,
        proid: query.proid,
        num: 1,
      });
      if (res) {
        console.log("加入成功", res);
        showConfirmDialog({
          title: "提示",
          message: "加入成功,是否进入购物车!",
        })
          .then(() => {
            router.push({ name: "car" });
          })
          .catch(() => {
            // on cancel
          });
      }
    } catch (err) {
      showFailToast(err.message);
    }
  } else {
    // 去登录
    toLogin();
  }
};
</script>

<style>
.navBar.detail-navBar .van-nav-bar__content .van-icon {
  color: #333;
}
</style>
<style lang="scss" scoped>
.navBar {
  position: fixed;
  z-index: 99;
}

.detail {
  width: 100%;
  height: 100%;
}

.my-swipe {
  // height: 3rem;
  img {
    width: 100%;
  }
}

.pro-info {
  font-size: 0.36rem;

  .col {
    margin-top: 0.1rem;
  }
}
</style>
